<template>
    <div class="echartLayout">
        <div id="container" style="width:100%; height:550px;"></div>
    </div>
</template>
<script>
export default {
    name: 'personRelation',
    data() {
        return {
            myChart: null,
            chartData: [],
            chartLink: [],
            colors: [
                '#00ADD0',
                '#FFA12F',
                '#B62AFF',
                '#604BFF',
                '#6E35FF',
                '#002AFF',
                '#20C0F4',
                '#95F300',
                '#04FDB8',
                '#AF5AFF',
            ],
            color: null,
        }
    },
    mounted() {
        const container = document.querySelector('#container')
        const main = document.querySelector('.main').clientHeight
        container.style.height = main + 'px'
        this.initEchart()
    },
    methods: {
        initEchart() {
            let dom = document.getElementById('container')
            // 图表的init
            this.myChart = this.$echarts.init(dom)
            this.chartData = this.dataEChart()
            let option = {
                type: 'tree',
                backgroundColor: '#2f2d3c',
                toolbox: {
                    show: true,
                    iconStyle: {
                        borderColor: '#03ceda',
                    },
                },
                tooltip: {
                    trigger: 'item', // 触发时机
                    triggerOn: 'mousemove', // rgba 颜色设置
                    backgroundColor: '#fff',
                    borderColor: 'rgba(0,246,255,1)',
                    borderWidth: 0.5,
                    textStyle: {
                        fontSize: 10,
                    },
                },
                // 标记线、标记点
                series: [
                    {
                        type: 'tree', // 是否开启鼠标 hover 的提示动画效果
                        hoverAnimation: false, // 数据
                        data: this.dataEChart(), // 样式
                        top: 0,
                        bottom: 0,
                        left: 0,
                        right: 0,
                        layout: 'radial',
                        symbol: 'circle',
                        symbolSize: 10,
                        nodePadding: 20,
                        animationDurationUpdate: 750,
                        expandAndCollapse: true,
                        initialTreeDepth: 2,
                        roam: true,
                        focusNodeAdjacency: true,
                        itemStyle: {
                            borderWidth: 1,
                        },
                        label: {
                            color: '#fff',
                            fontSize: 10,
                            fontFamily: 'SourceHanSansCN',
                            position: 'inside',
                            rotate: 0,
                        },
                        lineStyle: {
                            color: 'rgba(255,0,255,0.4)',
                            width: '2',
                            type: 'dashed',
                            curveness: 0.2,
                            opacity: 1,
                        },
                    },
                ],
            }
            this.myChart.setOption(option)
            this.myChart.on('click', function (params) {
                console.log(params.data)
            })
        },
        dataEChart() {
            let data = {
                name: '根节点1',
                value: 0,
                children: [],
            }
            for (let i = 1; i <= 10; i++) {
                let obj = {
                    name: '节点' + i,
                    value: i,
                    children: [],
                }
                for (let j = 1; j <= 5; j++) {
                    let obj2 = {
                        name: `节点1-${i}-${j}`,
                        value: 1 + '-' + i + '-' + j,
                    }
                    if (j % 2 == 1) {
                        obj2.children = []
                        for (let k = 1; k <= 3; k++) {
                            let obj3 = {
                                name: `节点1-${i}-${j}-${k}`,
                                value: 1 + '-' + i + '-' + j + '-' + k,
                            }
                            obj2.children.push(obj3)
                        }
                    }
                    obj.children.push(obj2)
                }
                data.children.push(obj)
            }
            let arr = []
            arr.push(data)
            arr = this.handleData(arr, 0)
            console.log(arr)
            return arr
        },
        handleData(data, index, color = '#00f6ff') {
            return data.map((item, index2) => {
                if (index == 1) {
                    color = this.colors.find((item, eq) => eq == index2 % 10)
                } // 设置节点大小
                if (index === 0 || index === 1) {
                    item.label = {
                        position: 'inside',
                        //   rotate: 0,
                        //   borderRadius: "50%",
                    }
                } // 设置label大小
                switch (index) {
                    case 0:
                        item.symbolSize = 70
                        break
                    case 1:
                        item.symbolSize = 50
                        break
                    default:
                        item.symbolSize = 10
                        break
                } // 设置线条颜色
                item.lineStyle = { color: color }
                if (item.children) {
                    //存在子节点
                    item.itemStyle = {
                        borderColor: color,
                        color: color,
                    }
                    item.children = this.handleData(
                        item.children,
                        index + 1,
                        color
                    )
                } else {
                    // 不存在
                    item.itemStyle = {
                        color: 'transparent',
                        borderColor: color,
                    }
                }
                return item
            })
        },
    },
}
</script>
<style lang="less" scoped>
</style>